<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Range HeatMap</title>


    <link href="../assets/styles.css" rel="stylesheet" />

    <style>
        #chart {
            max-width: 650px;
            margin: 35px auto;
        }
    </style>
</head>

<body>
    <div id="chart">

    </div>


    <script src="../../dist/apexcharts.js"></script>

    <script>
        /*
                        // this function will generate output in this format
                        // data = [
                            [timestamp, 23],
                            [timestamp, 33],
                            [timestamp, 12]
                            ...
                        ]
                        */
        function generateData(count, yrange) {
            var i = 0;
            var series = [];
            while (i < count) {
                var x = (i + 1).toString();
                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

                series.push({
                    x: x,
                    y: y
                });
                i++;
            }
            return series;
        }


        var options = {
            chart: {
                height: 380,
                type: 'heatmap',
            },
            plotOptions: {
                heatmap: {
                    shadeIntensity: 0.5,

                    colorScale: {
                        ranges: [{
                                from: -30,
                                to: 5,
                                name: 'low',
                                color: '#00A100'
                            },
                            {
                                from: 6,
                                to: 20,
                                name: 'medium',
                                color: '#128FD9'
                            },
                            {
                                from: 21,
                                to: 45,
                                name: 'high',
                                color: '#FFB200'
                            },
                            {
                                from: 46,
                                to: 55,
                                name: 'extreme',
                                color: '#FF0000'
                            }
                        ]
                    }
                }
            },
            dataLabels: {
                enabled: false
            },
            series: [{
                    name: 'Jan',
                    data: generateData(20, {
                        min: -30,
                        max: 55
                    })
                },
                {
                    name: 'Feb',
                    data: generateData(20, {
                        min: -30,
                        max: 55
                    })
                },
                {
                    name: 'Mar',
                    data: generateData(20, {
                        min: -30,
                        max: 55
                    })
                },
                {
                    name: 'Apr',
                    data: generateData(20, {
                        min: -30,
                        max: 55
                    })
                },
                {
                    name: 'May',
                    data: generateData(20, {
                        min: -30,
                        max: 55
                    })
                },
                {
                    name: 'Jun',
                    data: generateData(20, {
                        min: -30,
                        max: 55
                    })
                },
                {
                    name: 'Jul',
                    data: generateData(20, {
                        min: -30,
                        max: 55
                    })
                },
                {
                    name: 'Aug',
                    data: generateData(20, {
                        min: -30,
                        max: 55
                    })
                },
                {
                    name: 'Sep',
                    data: generateData(20, {
                        min: -30,
                        max: 55
                    })
                }
            ],
            title: {
                text: 'HeatMap Chart with Color Range'
            },

        }

        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );

        chart.render();
    </script>
</body>

</html>